<template>
  <div class="welcome-page">
    <div class="header">
      <h1>🤖 AI智能体电商客服系统</h1>
      <p class="version">v1.0.0</p>
    </div>
    
    <div class="content">
      <div class="card">
        <h2>✅ 前端服务运行中</h2>
        <p>端口: {{ port }}</p>
        <p>状态: <span class="status-success">正常</span></p>
        <el-button type="primary" @click="goToLogin" style="margin-top: 12px;">
          🔐 登录系统
        </el-button>
        <el-button type="success" @click="goToChat" style="margin-top: 12px; margin-left: 10px;">
          💬 体验聊天
        </el-button>
        <el-button type="warning" @click="goToPriceHistory" style="margin-top: 12px; margin-left: 10px;">
          📈 价格历史
        </el-button>
      </div>

      <div class="card">
        <h2>🔗 后端连接测试</h2>
        <div v-if="backendStatus.loading">
          <p>正在检测...</p>
        </div>
        <div v-else-if="backendStatus.connected">
          <p>状态: <span class="status-success">已连接</span></p>
          <p>{{ backendStatus.message }}</p>
          <p class="small">后端地址: {{ backendUrl }}</p>
        </div>
        <div v-else>
          <p>状态: <span class="status-error">未连接</span></p>
          <p>{{ backendStatus.error }}</p>
          <p class="small">请确保后端服务已启动</p>
        </div>
        <button @click="testBackend" class="btn">重新测试</button>
      </div>

      <div class="card">
        <h2>📚 快速开始</h2>
        <ul class="list">
          <li>✨ 前端开发: <code>cd frontend && npm run dev</code></li>
          <li>🐍 后端开发: <code>cd backend && uvicorn app.main:app --reload</code></li>
          <li>🐳 Docker启动: <code>docker-compose up -d</code></li>
          <li>📖 API文档: <a :href="backendUrl + '/api/v1/docs'" target="_blank">{{ backendUrl }}/api/v1/docs</a></li>
        </ul>
      </div>

      <div class="card">
        <h2>🎯 下一步</h2>
        <ul class="list">
          <li>配置 OpenAI API 密钥（.env文件）</li>
          <li>准备知识库文档</li>
          <li>开发聊天界面</li>
          <li>集成 AI Agent</li>
        </ul>
      </div>
    </div>

    <div class="footer">
      <p>🚀 环境测试页面 - 开发环境配置完成</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const port = ref('5173')
const backendUrl = ref('http://localhost:8000')

interface BackendStatus {
  loading: boolean
  connected: boolean
  message: string
  error: string
}

const backendStatus = ref<BackendStatus>({
  loading: true,
  connected: false,
  message: '',
  error: ''
})

const testBackend = async () => {
  backendStatus.value.loading = true
  backendStatus.value.connected = false
  backendStatus.value.error = ''
  
  try {
    const response = await fetch(`${backendUrl.value}/health`)
    if (response.ok) {
      const data = await response.json()
      backendStatus.value.connected = true
      backendStatus.value.message = `${data.service} - ${data.status}`
    } else {
      throw new Error(`HTTP ${response.status}`)
    }
  } catch (error: any) {
    backendStatus.value.connected = false
    backendStatus.value.error = error.message || '连接失败'
  } finally {
    backendStatus.value.loading = false
  }
}

const goToLogin = () => {
  router.push('/login')
}

const goToChat = () => {
  router.push('/chat')
}

const goToPriceHistory = () => {
  router.push('/price-history')
}

onMounted(() => {
  testBackend()
})
</script>

<style scoped>
.welcome-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.header {
  text-align: center;
  color: white;
  margin-bottom: 40px;
  padding: 40px 20px;
}

.header h1 {
  font-size: 3em;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.version {
  font-size: 1.2em;
  opacity: 0.9;
  margin-top: 10px;
}

.content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}

.card h2 {
  margin-top: 0;
  color: #333;
  font-size: 1.4em;
}

.card p {
  color: #666;
  line-height: 1.6;
}

.status-success {
  color: #10b981;
  font-weight: bold;
}

.status-error {
  color: #ef4444;
  font-weight: bold;
}

.btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1em;
  margin-top: 10px;
  transition: background 0.2s;
}

.btn:hover {
  background: #5568d3;
}

.list {
  list-style: none;
  padding: 0;
}

.list li {
  padding: 8px 0;
  color: #555;
}

code {
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

.small {
  font-size: 0.85em;
  color: #999;
  margin-top: 8px;
}

a {
  color: #667eea;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.footer {
  text-align: center;
  color: white;
  padding: 20px;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .header h1 {
    font-size: 2em;
  }
  
  .content {
    grid-template-columns: 1fr;
  }
}
</style>












